<template>
	<view class="container">
		
		<!--tabbar-->
		<view class="tui-tabbar">
			<block v-for="(item,index) in tabbar" :key="index">
				<view class="tui-tabbar-item" :class="[tabCur==index?'tui-item-active':'']" :data-index="index" @tap="tabbarSwitch">
					<view :class="[index==0?'tui-ptop-4':'']">
						<tui-icon :name="tabCur==index?item.icon+'-fill':item.icon" :color="tabCur==index?'#E41F19':'#666'" :size="item.size"></tui-icon>
					</view>
					<view class="tui-scale">{{item.text}}</view>
				</view>
			</block>
		</view>
		<!--tabbar-->
		
		
		<!--选项卡逻辑自己实现即可，此处未做处理-->
		<view :class="{'tui-order-list':scrollTop>=0}">
		
			<tui-tips v-if="noData" imgUrl="/static/images/toast/img_nodata.png">暂无数据</tui-tips>
			
			<!--订单列表-->
			<view v-for="(item,index) in orderList" :key="index" class="tui-order-item" @tap.stop="goJifenOrderView(item.id)">
				<tui-list-cell :hover="false" :lineLeft="0">
					<view class="tui-goods-title">
						<view>积分商城</view>
						<view class="tui-order-status">{{item.add_time}}</view>
					</view>
				</tui-list-cell>
				<block>
					<tui-list-cell padding="0">
						<view class="tui-goods-item">
							<image :src="item.goods_img_logo" class="tui-goods-img"></image>
							<view class="tui-goods-center">
								<view class="tui-goods-name">{{item.goods_name}}</view>
							</view>
							<view class="tui-price-right">
								<view>￥{{item.goods_jifen}}</view>
							</view>
						</view>
					</tui-list-cell>
				</block>
				<view class="tui-order-btn">
					<view class="tui-btn-ml">
						<tui-button type="black" :plain="true" width="148rpx" height="56rpx" :size="26" shape="circle">积分兑换</tui-button>
					</view>
					<view class="tui-btn-ml">
						<tui-button v-if="item.status != 3" type="danger" :plain="true" width="148rpx" height="56rpx" :size="26" shape="circle">{{item.status_name}}</tui-button>
						<tui-button v-if="item.status == 3" type="danger" width="148rpx" height="56rpx" :size="26" @tap="postOrderFinish(item.id)">确认收货</tui-button>
					</view>
				</view>
			</view>

		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn" bgcolor="#fafafa"></tui-nomore>
		<!--加载loadding-->

	</view>
</template>

<script>
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	import tuiLoadmore from "@/components/thorui/tui-loadmore/tui-loadmore"
	import tuiNomore from "@/components/thorui/tui-nomore/tui-nomore"
	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell"
	import tuiSticky from "@/components/thorui/tui-sticky/tui-sticky"
	import tuiTips from "@/components/thorui/tui-tips/tui-tips"
	export default {
		components: {
			tuiTabs,
			tuiButton,
			tuiLoadmore,
			tuiNomore,
			tuiListCell,
			tuiSticky,
			tuiTips,
			footerMenu,
			tuiIcon,
		},
		data() {
			return {
				pageIndex: 1,
				pageCount: 0,
				pageTotal: 0,
				orderList: [],
				
				noData: false,		//暂无数据
				loadding: false,
				pullUpOn: true,
				scrollTop: 0,
				
				//底部导航栏tabbar
				tabCur: 1,
				tabbar: [{icon: "home", text: "首页", size: 21}, 
					{icon: "people", text: "我的", size: 24}],
			}
		},
		methods: {
			
			//底部导航栏tabbar
			tabbarSwitch: function(e) {
				let index = e.currentTarget.dataset.index;
				this.tabCur = index;
				if (index == 0) {
					uni.switchTab({ url: '/pages/site/index' })
				} else {
					uni.switchTab({ url: '/pages/my/index' })
				}
			},
			

			
			//得到订单的详情
			goJifenOrderView: function(e) {
				uni.navigateTo({
					url: '/pages/jifen/order-view?id='+ e
				})
			},
			
			//得到订单列表
			getOrderList: function(type) {
				if(type != 'append') this.pageIndex = 1;
				uni.request({
					url: this.$apiUrl + '/api/jifen/order-list',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
					data: { page_num: this.pageIndex},
					success: (res) => {
						let resData = res.data['data'];
						if(type == 'append') {		//底部分页加载更多
							this.orderList = this.orderList.concat(resData['list']);
						}else{
							this.orderList = resData['list'];
							if(resData['list'].length == 0){
								this.noData = true;
							}
						}
						this.pageCount = resData['pager']['page_total'];
						this.pageTotal = resData['pager']['count'];
					}
				});
			},
			
			//确认订单完成
			postOrderFinish: function(orderId) {
				uni.request({
					url: this.$apiUrl + '/api/jifen/post-finish',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
					data: {
						order_id: orderId,
					},
					success: (res) => {
						let resMsg = res.data['msg'];
						this.tui.toast(resMsg);
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/jifen/order-list'
							});
						}, 1000);
					}
				});
			},	
			
		},
		
		
		//页面加载的时候
		onLoad: function(options) {
			if(!uni.getStorageSync('hasLogin')) {
				uni.navigateTo({ url: '/pages/my/login' })
			}
			this.getOrderList();
		},
		
		//上拉刷新页面
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200);
		},
		
		//下拉加载更多
		onReachBottom() {
			if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.pageIndex == this.pageCount) {
				this.loadding = false;
				this.pullUpOn = false
			} else {
				this.pageIndex = this.pageIndex + 1;
				this.getOrderList('append');
				this.loadding = true;
			//	this.pullUpOn = true;
			}
		},
		
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style>
	
	/*tabbar*/
	.tui-tabbar {width: 100%; position: fixed; display: flex;align-items: center;justify-content: space-between;z-index: 99999;background: #fff; height: 100rpx;left: 0;bottom: 0;padding-bottom: env(safe-area-inset-bottom);}
	.tui-safearea-bottom {width: 100%;height: env(safe-area-inset-bottom);}
	.tui-tabbar::before {content: ''; width: 100%; border-top: 1rpx solid #d9d9d9;position: absolute;top: 0;left: 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
	.tui-tabbar-item {flex: 1;width: 25%;display: flex;align-items: center;flex-direction: column;justify-content: space-between;font-size: 24rpx;color: #666;height: 80rpx;}
	.tui-ptop-4 {padding-top: 4rpx;}
	.tui-scale {font-weight: bold;transform: scale(0.8);transform-origin: center 100%;line-height: 30rpx;}
	.tui-item-active {color: #e41f19 !important;}
	/*tabbar*/
	
	
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-order-list {
		margin-top: 10rpx;
	}

	.tui-order-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-order-status {
		color: #888;
		font-size: 26rpx;
	}

	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-color-red {
		color: #E41F19;
		padding-right: 30rpx;
	}

	.tui-goods-price {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		font-size: 24rpx;
	}

	.tui-size-24 {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-price-large {
		font-size: 32rpx;
		line-height: 30rpx;
		font-weight: 500;
	}

	.tui-order-btn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background: #fff;
		padding: 10rpx 30rpx 20rpx;
		box-sizing: border-box;
	}

	.tui-btn-ml {
		margin-left: 20rpx;
	}
	
</style>